<!--  -->
<script setup lang="ts">
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
import { SshLinkInfo } from './../../entity/entitys';
interface DataProps {
    menu: SshLinkInfo[]
}
// 接收Props
const props = defineProps<DataProps>();
console.log('1-开始创建组件-setup')
const data: DataProps = reactive({
    menu: props.menu
})

onBeforeMount(() => {
    console.log('2.组件挂载页面之前执行----onBeforeMount')
})
onMounted(() => {
    console.log('3.-组件挂载到页面之后执行-------onMounted')
})

function handleAddSsh(folderIndex: number) {
    // 添加新的SSH连接逻辑
}

function handleDeleteFolder(folderIndex: number) {
    // 删除文件夹逻辑
}

function handleDeleteConnection(connectionIndex: number) {

}
const { menu } = toRefs(data);
</script>
<template>
    <v-container>
        <v-list v-if="menu.length > 0">
            <v-list-item v-for="(folder, index) in menu" :key="index">
                <v-list-item-title>{{ folder.name }}</v-list-item-title>
                <v-menu bottom offset-y>
                    <template #activator="{ on }">
                        <v-btn icon v-on="on">
                            <v-icon>mdi-dots-vertical</v-icon>
                        </v-btn>
                    </template>
                    <v-list>
                        <v-list-item @click="handleAddSsh(index)">
                            <v-list-item-title>添加SSH连接</v-list-item-title>
                        </v-list-item>
                        <v-list-item @click="handleDeleteFolder(index)">
                            <v-list-item-title>删除文件夹</v-list-item-title>
                        </v-list-item>
                    </v-list>
                </v-menu>
            </v-list-item>
        </v-list>
        <!-- SSH连接列表 -->
        <!-- <v-list>
            <v-list-item v-for="(connection, index) in connections" :key="index">
                <v-list-item-title>{{ connection.title }} - {{ connection.host }}</v-list-item-title>
                <v-spacer></v-spacer>
                <v-btn icon @click="handleDeleteConnection(index)">
                    <v-icon color="error">mdi-delete</v-icon>
                </v-btn>
            </v-list-item>
        </v-list> -->
    </v-container>
</template>

<style lang="scss" scoped></style>